<template>
	<view class="container">
		<view class="header">
			<view class="header-left">
			</view>
			<view class="header-right" @click="handleLogin">
				登录
			</view>
		</view>

		<view class="form">
			<view class="form-title">
				注册
			</view>
			<view class="form-input">
				<input placeholder="请输入账号" v-model="form.mobile" />
			</view>
			<view class="form-input">
				<input placeholder="验证码" v-model="form.code" />
				<text v-if="!start" @click="handleCount">获取验证码</text>
				<view v-if="start" class="count">
					<uni-countdown :start="start" :show-day="false" :font-size="14" color="#1A64FF" :showHour="false"
						:showMinute="false" :second="60" @timeup="timeup"></uni-countdown>
					<view>秒后重试</view>
				</view>

			</view>
			<view class="form-input">
				<input placeholder="请输入密码" :password="showPassword" v-model="form.password" />
				<image v-if="showPassword" src="@/static/hide.png" mode="aspectFill" @click="changePassword"></image>
				<image v-else src="@/static/open.png" mode="aspectFill" @click="changePassword"></image>
			</view>
			<view class="form-input">
				<input placeholder="请再次确认密码" :password="showPassword" v-model="form.passwordTwo" />
				<image v-if="showPassword" src="@/static/hide.png" mode="aspectFill" @click="changePassword"></image>
				<image v-else src="@/static/open.png" mode="aspectFill" @click="changePassword"></image>
			</view>
			<view class="form-input" v-if="initInfo.getInviteCode?.json?.status == 1">
				<input placeholder="请填写上级邀请码(必填)" v-model="form.invite_code" />
			</view>
			<view class="form-btn" @click="handleZhuce">
				注册
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getHttpApi,
		postHttpApi
	} from '@/api/api.js';
	import login from '@/utils/login.js';

	const showPassword = ref(true);
	const start = ref(false);
	const form = ref({
		mobile: '',
		password: '',
		passwordTwo: '', // Added missing field from your comparison in handleZhuce
		isCheck: false,
		invite_code: '',
		code: '',
	});
	const initInfo = ref({});

	const getInit = () => {
		getHttpApi({
			route: 'member.register.register-page',
			type: '5',
			scope: 'pass',
			validate_page: '1'
		}).then(res => {
			console.log(res, 'aaaa');
			initInfo.value = res.data;
		});
	};

	const handleCount = () => {
		if (!form.value.mobile) {
			uni.showToast({
				title: '请先输入手机号',
				icon: 'none'
			});
			return;
		}
		start.value = true;
		getHttpApi({
			route: 'member.register.sendCodeV2',
			sms_type: '2',
			reset: '1',
			type: '5',
			scope: 'pass',
			mobile: form.value.mobile
		}).then(res => {
			uni.showToast({
				title: '验证码发送成功',
				icon: 'none'
			});
		});
	};

	const timeup = () => {
		start.value = false;
	};

	const changePassword = () => {
		showPassword.value = !showPassword.value;
	};

	const handleLogin = () => {
		uni.navigateTo({
			url: '/pages/login/index'
		});
	};

	const handleZhuce = () => {
		if (!form.value.mobile) {
			uni.showToast({
				title: '请先输入手机号',
				icon: 'none'
			});
			return;
		}
		if (!form.value.password) {
			uni.showToast({
				title: '请先输入密码',
				icon: 'none'
			});
			return;
		}
		if (form.value.password !== form.value.passwordTwo) {
			uni.showToast({
				title: '确认密码与密码不一致',
				icon: 'none'
			});
			return;
		}
		if (!form.value.code) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return;
		}

		postHttpApi({
			mobile: form.value.mobile,
			password: form.value.password,
			code: form.value.code,
			register_type: '1',
			system_type: 'h5',
			invite_code: form.value.invite_code
		}, '&route=member.register.register&type=5&scope=pass&uuid=0&shop_id=null').then(res => {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		});
	};

	// Call getInit on component mount
	getInit();
</script>
<style>
	page {
		background-image: url('../../static/bg.png');
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 18rpx 28rpx 18rpx 10rpx;

		&-left {
			width: 44rpx;
			height: 44rpx;
		}

		&-right {
			font-weight: 350;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}

	.form {
		width: 640rpx;
		margin: auto;
		margin-top: 84rpx;

		&-title {
			font-weight: 400;
			font-size: 72rpx;
			color: #000000;
			margin-bottom: 154rpx;
		}

		&-input {
			width: 640rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #000000;
			position: relative;
			margin-bottom: 42rpx;

			&>image {
				width: 56rpx;
				height: 56rpx;
				position: absolute;
				right: 24rpx;
				top: 28rpx;
			}

			&>input {
				height: 100%;
				padding: 0 46rpx;
			}

			&>text {
				position: absolute;
				right: 24rpx;
				top: 28rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #1A64FF;
				line-height: 48rpx;
			}

			.count {
				position: absolute;
				right: 24rpx;
				top: 28rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #1A64FF;
				line-height: 48rpx;
				display: flex;
				align-items: center;
			}
		}


		&-btn {
			width: 638rpx;
			height: 104rpx;
			background: #1A64FF;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-weight: 900;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 104rpx;
			margin-top: 72rpx;
		}

	}
</style>